<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>整改措施</title>
		<link href="css/common.css" rel="stylesheet" type="text/css" />
		<link href="css/style.css" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="js/rem.js"></script>
		<style type="text/css">
			.modal {
				width:100%;
				height:100%;
				background:#0000;
				left: 0;
				top: 0;
				position: fixed;
				z-index: 1100;
				display: none;
			}
			
			.modal.show {
				display: block;
			}
			
			.load-container {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -0.5rem;
				margin-top: -0.5rem;
			}

			.card-title {
				width:100%;
				height:0.45rem;
				font-size:0.32rem;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				color:rgba(34,34,34,1);
				line-height:0.45rem;
			}

			.date-box {
				margin-top: 0.3rem;
				position: relative;
			}

			.date-input {
				width:100%;
				background:rgba(255,255,255,1);
				border-radius:0.08rem;
				border:1px solid rgba(0,0,0,0.2);
				padding: 0.16rem 0.24rem;
				font-size: 0.28rem;
				color: #222222;
			}

			.date-icon {
				width: 0.32rem;
				font-size: 0.32rem;
				color: #CCCCCC;
				position: absolute;
				right: 0.24rem;
				top: 0.2rem;
			}

			.advice-box {
				width:100%;
				margin-top: 0.3rem;
				border-radius:0.08rem;
				border:1px solid rgba(0,0,0,0.2);
				padding: 0.16rem 0.40rem 0.64rem 0.24rem;
				font-size:0.28rem;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color: #222222;
				line-height: 0.4rem;
			}

			.photo-box-wrapper {
				margin-top: 0.14rem;
				display: flex;
				height: auto;
				flex-wrap: wrap;
				word-wrap:break-word;
				word-break:break-all;
				overflow: hidden;
			}
			.photo-box {
				width: 1.6rem;
				height:1.6rem;
				position: relative;
				margin-right: 0.16rem;
				margin-top: 0.16rem;
				line-height: 1.6rem;
			}
			.photo-img {
				width: 1.6rem;
				height:1.6rem;
				border-radius:0.08rem;
				object-fit: cover;   /* 替换元素内容大小使其保持其宽高比 */
			}

			.close-btn {
				width:0.32rem;
				height:0.32rem;
				right: 0.08rem;
				top: 0.08rem;
				border-radius: 50%;
				background:rgba(0,0,0,0.65);
				position: absolute;
				font-size: 0.16rem;
				color: #FFFFFF;
				text-align: center;
				line-height: 0.32rem;
			}
	
			.upload-btn {
				width:1.6rem;
				height:1.6rem;
				margin-top: 0.16rem;
				position: relative;
			}
			
			.upload-style {
				width: 100%;
				height:100%;
				color: #BBBBBB;
				font-size: 0.4rem;
				text-align: center;
				background:rgba(255,255,255,1);
				border-radius:0.08rem;
				border:1px solid rgba(0,0,0,0.2);
				line-height: 1.6rem;
				margin-right: 0.16rem;
			}
			
			.upload-btn input[type=file] {
				width: 100%;
				height: 100%;
				opacity: 0;
				position: absolute;
				top: 0;
				left: 0;
			}
	
		</style>
	</head>
	<body>
		<!-- 标题栏 -->
		<div class="app-nav">
			<text class="app-nav-title">标题</text>
		</div>
		
		<div class="modal" id="modal-loading">
			<div class="load-container loadEffect" >
			        <span></span>
			        <span></span>
			        <span></span>
			        <span></span>
			        <span></span>
			        <span></span>
			        <span></span>
			        <span></span>
			</div>
		</div>
		
		<div class="app-header">
			<div class="header-step">03</div>
			<div class="header-title">整改措施</div>
		</div>
		<div class="app-content-wrapper">
			<div class="app-content">
				<div class="radio-title">处理情况</div>
				<div style="margin-top: 0.3rem;">
					<div class="radio-item">
						<input id="yes" type="radio" name="question1" value="1" />
						<label class="icon-radio" for="yes"></label>
						<div class="radio-item-text">通过</div>
					</div>
					<div class="radio-item">
						<input id="no" type="radio" name="question1" value="0" />
						<label class="icon-radio" for="no"></label>
						<div class="radio-item-text">现场整改</div>
					</div>
					<div class="radio-item">
						<input id="no" type="radio" name="question1" value="0" checked/>
						<label class="icon-radio" for="no"></label>
						<div class="radio-item-text">限期整改</div>
					</div>
				</div>
			</div>

			<div class="app-content">
				<div class="card-title">整改时间</div>
				<div class="date-box">
					<input class="date-input" type="date" value="2020-05-30" />
					<span class="icon-date date-icon"></span>
				</div>
			</div>

			<div class="app-content">
				<div class="card-title">处理意见</div>
				<textarea class="advice-box">
					对于一经查实安全隐患，严格准责，立即安排
					相关专业人士到场指挥，避免一切安全隐患
				</textarea>
			</div>


			<div class="app-content">
				<div class="card-title">上传图片</div>
				<div class="photo-box-wrapper" id="photo-box-wrapper">
					<div class="photo-box">
						<img class="photo-img" src="img/img1.jpg" />
						<span class="icon-delete close-btn "></span>
					</div>
					
					<div class="upload-btn" id="upload-btn">
						<div class="upload-style" >
							<span class="icon-add"></span>
						</div>
						<input type="file"/>
					</div>
				</div>
			</div>

			<div class="bottom-btn-wrapper">
				<div class="bottom-btn bg-white" id="pre">上一步</div>
				<div class="bottom-btn bg-blue" id="next">下一步</div>
			</div>
		</div>

		<script type="text/javascript">

			var btn = document.getElementById("pre");
			var index = 0;
			btn.onclick=function(){
				console.log('点击执行了了')
				var pNode = document.getElementById("photo-box-wrapper");
				var cNode = document.getElementById("upload-btn");
		
				index++;
				if(index > 5) {
					index = 1
				}
				var addPhotoString = '<div class="photo-box">'+
				 			'<img class="photo-img" src="img/img'+index+'.jpg" />'+
				 			'<span class="icon-delete close-btn "></span>'+
				 		'</div>';
				var addNode = parseElement(addPhotoString)
				pNode.insertBefore(addNode,cNode);
			}

			var parseElement = function(htmlString){
			　　return new DOMParser().parseFromString(htmlString,'text/html').body.childNodes[0]
			}
			
			var nextBtn = document.getElementById("next")
			var loading = document.getElementById("modal-loading")
			nextBtn.onclick= function () {
				console.log('下一步')
				loading.classList.add('show')
			}
			loading.onclick = function() {
				console.log('单击取消')
				loading.classList.remove('show')
			}
			
		</script>
	</body>

</html>
